<template>
  <div class="radar-chart">
    <!-- 雷达图中心原点 -->
    <div class="radar-center" :class="{ 'center-arrived': isArrive, 'center-default': !isArrive }"></div>

    <!-- 图例 -->
    <div class="legend">
      <div
        class="legend-item"
        v-for="type in orderTypeOptions"
        :key="type"
        @click="handleLegendClick(type)"
        :class="{ active: orderType === type }"
      >
        <div class="legend-point" :style="{ backgroundColor: getColor(type) }"></div>
        <div class="legend-text">{{ type }}</div>
      </div>
    </div>

    <yard-map-svg :crane-no="craneNo" />
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { storeToRefs } from 'pinia';

import YardMapSvg from './yard-svg/index.vue';
import { useTerminalStore } from '../store';
import { getColor } from './utils';

export default defineComponent({
  name: 'terminal-crane-radar-chart',
  components: {
    YardMapSvg,
  },
  props: {
    craneNo: {
      type: String,
      required: true,
    },
  },
  setup() {
    const terminalStore = useTerminalStore();
    const { orderType, orderTypeOptions, isArrive } = storeToRefs(terminalStore);

    const handleLegendClick = (type: string) => {
      orderType.value = orderType.value === type ? '' : type;
    };

    return {
      orderTypeOptions,
      orderType,
      isArrive,
      handleLegendClick,
      getColor,
    };
  },
});
</script>
<style lang="scss" scoped>
@font-face {
  font-family: 'OpenSans_Condensed-Regular';
  src: url('src/assets/fonts/AlibabaPuHuiTi-3-55-Regular.ttf') format('truetype');
}

.radar-chart {
  width: 1024px;
  height: 80vh; /* 适应整个视口高度 */
  background-image: url('src/assets/terminal/radarchart.png');
  background-size: 145% 100%; /* 保持图片比例完整显示 */
  background-position: center;
  background-repeat: no-repeat; /* 防止背景图片重复 */
  position: relative;
}

.radar-center {
  position: absolute;
  width: 50px;
  height: 50px;
  background-size: contain;
  background-repeat: no-repeat;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.center-default {
  background-image: url('src/assets/terminal/radar-center.png');
}

.center-arrived {
  background-image: url('src/assets/terminal/center_arrived.png');
}

/* 图例样式 */
.legend {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  gap: 20px;
  z-index: 2; /* 确保图例在前 */
}

.legend-item {
  display: flex;
  align-items: center;
  cursor: pointer;

  &.active .legend-point {
    border: 2px solid #ffffff;
    transform: scale(1.6);
  }
}

.legend-point {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-right: 8px;
}

.legend-text {
  color: #ffffff;
  font-size: 14px;
  font-family: 'OpenSans_Condensed-Regular', sans-serif;
}

/* 动态点样式 */
.radar-points {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1; /* 确保点在后 */
}

.arrived::before,
.arrived::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: rgba(44, 202, 234, 0.3); /* 半透明红色背景 */
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: ellipseRipple 2s infinite;
}

.arrived::before {
  width: 100px; /* 初始宽度 */
  height: 50px; /* 初始高度 */
}

.arrived::after {
  width: 150px; /* 更大的涟漪初始宽度 */
  height: 75px; /* 更大的涟漪初始高度 */
  animation: ellipseRipple 2.5s infinite; /* 稍长的动画持续时间 */
}

@keyframes ellipseRipple {
  0% {
    width: 200px;
    height: 100px;
    opacity: 0.7;
  }
  100% {
    width: 400px;
    height: 200px;
    opacity: 0;
  }
}

@keyframes ellipseRippleBig {
  0% {
    width: 400px;
    height: 200px;
    opacity: 0.7;
  }
  100% {
    width: 1000px;
    height: 500px;
    opacity: 0;
  }
}
</style>
